<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tunnel Manager</title>
    <link rel="stylesheet" type="text/css" href="js/cdn-mirror/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/cdn-mirror/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="js/cdn-mirror/bootstrap-select/1.13.8/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/custom-switch/custom-switch.css"/>

    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/bootstrap-select/1.13.8/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/custom-switch/custom-switch.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/lib.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/resources.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jfx-bridge.js"></script>

    <link rel="stylesheet" type="text/css" href="css/metro/app.css" />
</head>
<body>
<div class="top-separator"></div>
<ul class="tool-bar clearfix" id="tool-bar">
    <li><a class="tool-button btn-remove disabled" data-action="btn-remove" title="Remove Tunnel"></a></li>
    <li class="separator"></li>
    <li><a class="tool-button btn-connected disabled" data-action="btn-connected" title="Connect Tunnel"></a></li>
    <li><a class="tool-button btn-disconnected disabled" data-action="btn-disconnected" title="Disconnect Tunnel"></a></li>
    <li class="separator"></li>
    <li><a class="tool-button btn-ok disabled" data-action="btn-ok" title="Save"></a></li>
    <li><a class="tool-button btn-cancel disabled" data-action="btn-cancel" title="Cancel"></a></li>
</ul>
<div class="root-container">
<table class="server-editor">
    <tr>
        <td class="label-field"><label id="lbl-tunnel-name" for="tunnel-name">Tunnel Name</label></td>
        <td class="control-field"><input type="text" class="form-control maskable" placeholder="Tunnel Name" id="tunnel-name"/></td>
    </tr>
    <tr>
        <td class="label-field"><label id="lbl-server" for="server">Server</label></td>
        <td class="control-field">
            <select class="form-control" id="server">
                <option id="lbl-server-selector">-- please pickup a server --</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="label-field"><label id="lbl-mapping-port" for="mapping-port">Mapping Port</label></td>
        <td class="control-field">
            <input type="text" class="form-control maskable number-field" placeholder="Mapping Port" id="mapping-port"/>
        </td>
    </tr>
    <tr>
        <td class="label-field"><label id="lbl-local-server" for="local-server">Local Server Address</label></td>
        <td class="control-field">
            <input type="text" class="form-control maskable" placeholder="Local Server Address" id="local-server"/>
        </td>
    </tr>
    <tr>
        <td class="label-field"><label id="lbl-local-service" for="local-service-port">Local Service Port</label></td>
        <td class="control-field">
            <input type="text" class="form-control maskable number-field" placeholder="Local Server Address" id="local-service-port"/>
        </td>
    </tr>
    <tr>
        <td class="label-field"><label id="lbl-auto-connect" for="auto-connect">Auto Connect</label></td>
        <td class="control-field"><input type='checkbox' class="custom-switch" id="auto-connect"/></td>
    </tr>
</table>
</div>
<script type="text/javascript" charset="utf-8" src="js/tunnel.js"></script>
</body>
</html>